<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
	function containsCharsOnly(input, chars) {
	    for (var inx = 0; inx < input.length; inx++) {
	       if (chars.indexOf(input.charAt(inx)) == -1) {
	           return false;
	       }
	    }
	    return true;
	}
	
	function isNumber(input) {
	    var chars = "0123456789";
	    if (!containsCharsOnly(input, chars)) {
			alert("Please enter number only");
			return false;
	    }
	    return true;
	}
	
	function isWithinRange(input, min, max) {
		if (!isNumber(input)) {
			return false;
		}
		
		var intValue = parseInt(input, 10);
		if (min <= intValue &&  intValue <= max) {
			return true;
		} else {
			alert("Please enter " + min + " ~ " + max + ".");
			return false;
		}	
	}

	function apply(rollingId) {
		var rollingDiv = $("#" + rollingId);
		rollingDiv.setRollingTime($("input[type='text'][name='rollingTime']").val());
		rollingDiv.setViewingTime($("input[type='text'][name='viewingTime']").val());		
		var rollingAnimationFrame = $("input[type='text'][name='rollingAnimationFrame']").val();
		
		if (!isWithinRange(rollingAnimationFrame, 1, 100)) {		
			return;
		}	
				
		rollingDiv.setRollingAnimationFrameNext(rollingAnimationFrame);		
	}
		
	function rollingStop(rollingId) {
		var button = $("input[type='button'][name='controler']");
		if (button.val() == "stop") {
			$("#" + rollingId).stopRolling();
			button.val("resume");
		} else if (button.val() == "resume") {
			$("#" + rollingId).resumeRolling();
			button.val("stop");
		}
	}
	
	function reverse(rollingId) {
		$("#" + rollingId).reverseRolling();
	}
	
$(function() {
	eval($('#code').text());
});	
</script>
<body>
<pre>
<h2>Down Rolling</h2>
<table>
	<tr>
		<td width="200" align="center" valign="center">
			<div id="rolling">ready</div>
			<p>
			<div id="viewingComment"></div>
			<div id="rollingComment">top=0px, left=0px</div>	
			<div id="rollingStatus"></div>	
		</td>
		<td>
			<table border="1">
				<tr>
					<td width="150">Rolling Animation Time</td>
					<td width="100"><input type='text' name="rollingTime" size="4"> ms</td>					
				</tr>
				<tr>
					<td>Viewing Time</td>
					<td><input type='text' name="viewingTime" size="4"> ms</td>					
				</tr>
				<tr>
					<td>Rolling Animation Frame</td>
					<td><input type='text' name="rollingAnimationFrame" size="3"></div></td>					
				</tr>
				<tr>
					<td>Rolling Direction</td>
					<td><div id="direction"></div></td>
				</tr>
				<tr>
					<td>Viewing Item Count</td>
					<td><div id="viewingItemCount" style="display:inline"></div></td>
				</tr>
				<tr>
					<td>Rolling Item Count</td>
					<td><div id="rollingItemCount" style="display:inline"></div></td>
				</tr>
				<tr>
					<td colspan="2">
					<input type="button" value="apply" onclick="javascript: apply('rolling')">
					<input type="button" name="controler" value="stop" onclick="javascript: rollingStop('rolling')">
					<input type="button" value="reverse" onclick="javascript: reverse('rolling')">
					</td>
				</tr>				
			</table>
		</td>
	</tr>
</table>
<h2>Script</h2>
<xmp id='code'>
	var rollingDiv = $("#rolling");
	rollingDiv.rolling("down", 130, 100, 4);
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='1 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='2 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='3 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='4 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=v6MKOY9x_ds' target='_new'><img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100' alt='5 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ZBDD7aLd6lc' target='_new'><img src='http://i.ytimg.com/vi/ZBDD7aLd6lc/default.jpg' width='130' height='100' alt='6 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=et-dNoTi8IY' target='_new'><img src='http://i.ytimg.com/vi/et-dNoTi8IY/default.jpg' width='130' height='100' alt='7 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=mX1xyxWkmw0' target='_new'><img src='http://i.ytimg.com/vi/mX1xyxWkmw0/default.jpg' width='130' height='100' alt='8 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=fRWov2pdJkE' target='_new'><img src='http://i.ytimg.com/vi/fRWov2pdJkE/default.jpg' width='130' height='100' alt='9 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=QCmP4bEJfOg' target='_new'><img src='http://i.ytimg.com/vi/QCmP4bEJfOg/default.jpg' width='130' height='100' alt='10 item' border='0'/></a>")
	rollingDiv.bindRollingEvent(function(event, currentRollingItem) {
		$("#rollingComment").html("top=" + currentRollingItem.parent().css("top") + ", left=" + currentRollingItem.parent().css("left"));
	});
	rollingDiv.bindViewingEvent(function(event, currentRollingItem) {
		$("#viewingComment").html($("img", currentRollingItem).attr("alt"));
	});
	rollingDiv.bindStartEvent(function(event) {
		$("#rollingStatus").html("Start");
	});
	rollingDiv.bindStopEvent(function(event) {
		$("#rollingStatus").html("Stop");
	});
	rollingDiv.startRolling(30, 500, 30);
			
	$("input[type='text'][name='rollingTime']").val(rollingDiv.getRollingTime());
	$("input[type='text'][name='viewingTime']").val(rollingDiv.getViewingTime());
	$("input[type='text'][name='rollingAnimationFrame']").val(rollingDiv.getRollingAnimationFrame());
	$("#viewingItemCount").text(rollingDiv.getViewingItemCount());
	$("#rollingItemCount").text(rollingDiv.getRollingItems().size());
	$("#direction").text(rollingDiv.getRollingDirection());
</xmp>
</pre>
</body>